<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/gotrip.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Detail</title>
</head>
<body>
     <div class="pe1">
        <img src="./img/z_beijingtu.jpg" alt="贝加尔湖背景图" class="bg1">
        <img onclick="back()" class="bg2" src="./img/z_back2.png" alt="返回按钮">
        <div class="bg3">
            <img class="pe3" src="./img/z_sheying.png" alt="摄影图标">
            <p class="t1">摄影</p>
        </div>
        <div class="t2">贝加尔湖
            <p class="t3"><span class="t5">切换</span><img class="t4" src="./img/z_qiehuan2.png" alt="切换图标"></p>
        </div>
    </div>

    <div class="mobile">
        <div class="title">
            <p class="w1">贝加尔湖是现今容量最大，最深的淡水湖，被称为“西伯利亚的蓝眼睛”。其位于俄罗斯西伯利亚的南部伊尔库茨克州及布里亚特共和国境内，距蒙古国边界仅111公里，是东亚地区不少民族的发源地。湖上风景秀美、景观奇特，湖内物种丰富，是一座集丰富自然资源于一身的宝库。贝加尔湖面积广阔，大部分旅行者选择在西南部沿线旅行，欣赏沿途风光。湖水的结冻期来到这里，可以跟随旅行团的车子行驶在冰面上。湖畔小镇利斯特维扬卡则可以报名参加各种冰上活动，而湖边最大的交通枢纽及名副其实的大城市伊尔库茨克，则可以让旅行者们体验西伯利亚的正宗俄式风情——当然包括热量满满的俄罗斯大餐。</p>
            <img class="pe4" src="./img/z_zhuangshi.png" alt="装饰图标">
        </div>

        <div class="lists">
            <div class="list_1">
                <ul>
                    <li class="list_top">
                        <div class="tip">
                            <div class="w2">
                                <p>最佳季节</p>
                                <img class="pe44" src="./img/z_zhankai.png" alt="展开图标">
                            </div>
                            <p class="w3">冬季的冰封期（2月－3月）是贝加尔湖观赏蓝冰的最佳旅行季节。</p>
                        </div>
                    </li>
                    <li class="list_top">
                        <div class="tip">
                            <div class="w2">
                                <p>建议游玩</p>
                                <img class="pe44" src="./img/z_zhankai.png" alt="展开图标">
                            </div>
                            <p class="w3">贝加尔湖有22个岛，其中奥利洪岛最大。岛上大部为花岗岩和片麻，是贝加尔湖边唯一有人居住的岛，岩岛上一半是原始森林，一半是草原，还有一小部分是沙漠。塔利茨博物馆位于贝加尔湖的东岸，展现出居民木屋发展的演化过程，馆内有埃文基人的兽皮、桦皮帐篷，布里亚特贫民的蒙古包等。哈伯伊角（Cape Khoboy）是奥尔洪岛最北面的壮观岩石，当地人称它为“处女石”。伊尔库茨克喀山大教堂是当地最精美的教堂，呈红色，圆顶和窗框用蓝色点缀。</p>
                        </div>
                    </li>
                    <li class="list_top">
                        <div class="tip">
                            <div class="w2">
                                <p>语言</p>
                                <img class="pe44" src="./img/z_zhankai.png" alt="展开图标">
                            </div>
                            <p class="w3">俄语</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    

    <div class="addContents">
        <div class="tabButtons">
            <button class="tabBtn select" data-tab="booking">预订</button>
            <button class="tabBtn" data-tab="discover">遇见</button>
            <button class="tabBtn" data-tab="strategy">攻略</button>
            <button class="tabBtn" data-tab="travel">游记</button>
        </div>

        <div class="tabContent">
            <!-- 预订面板 -->
            <div class="tabPane1">
                <div class="tabButtons1">
                    <div class="sSlect">
                       
                        <div class="second select1" data-type="all">全部</div>
                        <div class="second" data-type="group">跟团游</div>
                    </div>
                    <div class="leftSele">
                        <p>筛选</p>
                        <img class="pe5" src="./img/z_shaixuan.png" alt="筛选图标">
                    </div>
                </div>
                <ul class="mobile1"></ul>
            </div>

            <!-- 遇见面板 -->
            <div class="tabPane2 hide">
                <div class="tabButtons1">
                    <div class="sSlect">
                        <div class="second select1" data-type="recommend">推荐</div>
                        <div class="second" data-type="latest">最新</div>
                    </div>
                    <div class="leftSele">
                        <p>筛选</p>
                        <img class="pe5" src="./img/z_shaixuan.png" alt="筛选图标">
                    </div>
                </div>
                <ul class="pic"></ul>
                <div class="load-more" data-panel="discover">加载更多</div>
            </div>

           
            <div class="tabPane3 hide">
                <div class="tabButtons1">
                    <div class="sSlect">
                        <div class="second select1" data-type="recommend">推荐</div>
                        <div class="second" data-type="latest">最新</div>
                    </div>
                    <div class="leftSele">
                        <p>筛选</p>
                        <img class="pe5" src="./img/z_shaixuan.png" alt="">
                    </div>
                </div>
                <ul class="miss"></ul>
                <div class="load-more" data-panel="strategy">加载更多</div>
            </div>

            <div class="tabPane4 hide">
                <div class="tabButtons1">
                    <div class="sSlect">
                        <div class="second select1">推荐</div>
                        <div class="second" data-type="latest">最新</div>
                    </div>
                    <div class="leftSele">
                        <p>筛选</p>
                        <img class="pe5" src="./img/z_shaixuan.png" alt="">
                    </div>
                </div>
                <ul class="trip"></ul>
                 <div class="load-more" data-panel="travel">加载更多</div>
            </div>
        </div>
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
       
        const panelState = {
            discover: { page: 1, isLoading: false, hasMore: true },
            strategy: { page: 1, isLoading: false, hasMore: true },
            travel: { page: 1, isLoading: false, hasMore: true }
        };

       
        const tabBtns = document.querySelectorAll('.tabBtn');
        const tabPanes = [
            document.querySelector('.tabPane1'),
            document.querySelector('.tabPane2'),
            document.querySelector('.tabPane3'),
            document.querySelector('.tabPane4')
        ];

        
        tabBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                tabBtns.forEach(b => b.classList.remove('select'));
                btn.classList.add('select');
                
                tabPanes.forEach(pane => pane.classList.add('hide'));
                tabPanes[index].classList.remove('hide');
                
                
                const tabType = btn.getAttribute('data-tab');
                if (panelState[tabType]) {
                    panelState[tabType].page = 1;
                    panelState[tabType].hasMore = true;
                    document.querySelector(`.load-more[data-panel="${tabType}"]`).classList.remove('disabled');
                }
                
                const activeSubTab = tabPanes[index].querySelector('.second.select1');
                if (activeSubTab) {
                    activeSubTab.click();
                }
            });
        });

       
        const subTabGroups = document.querySelectorAll('.sSlect');
        subTabGroups.forEach((group) => {
            const subTabs = group.querySelectorAll('.second');
            subTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                   
                    subTabs.forEach(t => t.classList.remove('select1'));
                    tab.classList.add('select1');
                    
                    
                    const tabType = tab.getAttribute('data-type');
                    const currentPanel = tab.closest('.tabContent > div');
                    const listContainer = currentPanel.querySelector('ul');
                    const panelName = currentPanel.classList[0].replace('tabPane', '');
                    const panelKey = ['', 'booking', 'discover', 'strategy', 'travel'][panelName];
                    
                    
                    if (panelState[panelKey]) {
                        panelState[panelKey].page = 1;
                        panelState[panelKey].hasMore = true;
                        document.querySelector(`.load-more[data-panel="${panelKey}"]`).classList.remove('disabled');
                    }
                    
                    
                    listContainer.innerHTML = '<li class="loading">加载中...</li>';
                    
                    
                    if (currentPanel.classList.contains('tabPane1')) {
                        loadBookingData(listContainer, tabType);
                    } else if (currentPanel.classList.contains('tabPane2')) {
                        loadDiscoverData(listContainer, tabType, true);
                    } else if (currentPanel.classList.contains('tabPane3')) {
                        loadStrategyData(listContainer, tabType, true);
                    } else if (currentPanel.classList.contains('tabPane4')) {
                        loadTravelData(listContainer, tabType, true);
                    }
                });
            });
        });

        // 1. 预订数据加载函数
        function loadBookingData(container, type) {
            const url = type === 'all' 
                ? "https://bbs.youxiake.com/api/mdd/booking?mddId=1057&page=1&classTypeId=99999&classTypeId2=0"
                : "https://bbs.youxiake.com/api/mdd/booking?mddId=1057&page=1&classTypeId=10000&classTypeId2=0";
                
            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    if (res1.data.list.length === 0) {
                        container.innerHTML = `<li class="mobile11">暂无${type === 'all' ? '预订' : '跟团游'}数据</li>`;
                        return;
                    }
                    container.innerHTML = '';
                    res1.data.list.forEach(item => {
                        container.innerHTML += `
                            <li class="mobile11">
                                <img src="${item.dataDetail.image || ''}" class="bg4" alt="产品图">
                                <span class="dingwei">${item.dataDetail.placeLabel || '默认出发'}</span>
                                <div class="bott">
                                    <p class="t6">${item.dataDetail.title || '未命名产品'}</p>
                                    ${item.dataDetail.tagList?.length > 0 ? '<p class="bao">爆品</p>' : ''}
                                    <div class="gentuan">
                                        <span>${item.dataDetail.productType || ''}${item.dataDetail.productCat || ''}${item.dataDetail.days || ''}</span>
                                    </div>
                                    <div class="tag11">
                                        <div class="two">高销量高口碑</div>
                                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                                    </div>
                                    <div class="bot2">
                                        <div class="txt6">
                                            <span>￥ </span>
                                            <span class="txt7">${item.dataDetail.priceLabel || '0'}</span>
                                            <span>起</span>
                                        </div>
                                        <span class="txt1">${item.dataDetail.numLabel || '0人已报名'}</span>
                                    </div>
                                </div>
                            </li>
                        `;
                    });
                })
                .catch(err => {
                    console.error('预订数据请求失败：', err);
                    container.innerHTML = `<li class="mobile11">数据加载失败，请重试</li>`;
                });
        }

        // 2. 遇见数据加载函数 
        function loadDiscoverData(container, type, isReset = false) {
            const state = panelState.discover;
            
            
            if (state.isLoading || (!isReset && !state.hasMore)) return;
            
            state.isLoading = true;
            const currentPage = isReset ? 1 : state.page;
            
            const url = type === 'recommend'
                ? `https://bbs.youxiake.com/api/mdd/discover?mddId=1057&type=1&theme=&contentType=&level=&page=${currentPage}`
                : `https://bbs.youxiake.com/api/mdd/discover?mddId=1057&type=2&theme=&contentType=&level=&page=${currentPage}`;
                
            if (!isReset) {
                document.querySelector('.load-more[data-panel="discover"]').textContent = '加载中...';
            }
                
            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    if (isReset) {
                        container.innerHTML = '';
                    }
                    
                    if (res1.data.list.length === 0) {
                        if (isReset) {
                            container.innerHTML = `<li class="pic1">暂无${type === 'recommend' ? '推荐' : '最新'}遇见内容</li>`;
                        } else {
                            state.hasMore = false;
                            document.querySelector('.load-more[data-panel="discover"]').textContent = '没有更多数据';
                            document.querySelector('.load-more[data-panel="discover"]').classList.add('disabled');
                        }
                        return;
                    }
                    
                   
                    res1.data.list.forEach(item => {
                        container.innerHTML += `
                            <li class="pic1">
                                <img class="pe8" src="${item.cover || ''}" alt="遇见图片">
                                <img class="pe99" src="./img/z_jingxuan.png" alt="标签图标">
                                <div class="location">
                                    <img class="pe9" src="./img/z_dingwei.png" alt="定位图标">
                                    <span>${item.address || '未知地点'}</span>
                                </div>
                                <div class="content1">
                                    ${item.discuss ? `<p class="con1">${item.discuss}</p>` : ''}
                                    <p class="con2">${item.content || '暂无描述'}</p>
                                    <div class="con3">
                                        <div class="con3left">
                                            <img class="pr8" src="${item.avatar || ''}" alt="用户头像">
                                            <img src="./img/z_renzheng.png" alt="认证图标" class="pr88">
                                            <p class="fo1">${item.username || '匿名用户'}</p>
                                        </div>
                                        <div class="con3right">
                                            <img class="pr9" src="./img/z_dianzan.png" alt="点赞图标">
                                            <span class="fo1">${item.prise || '0'}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        `;
                    });
                    
                    
                    state.page = currentPage + 1;
                    state.hasMore = res1.data.list.length >= 10; 
                    
                    
                    const loadMoreBtn = document.querySelector('.load-more[data-panel="discover"]');
                    loadMoreBtn.textContent = state.hasMore ? '加载更多' : '没有更多数据';
                    if (!state.hasMore) {
                        loadMoreBtn.classList.add('disabled');
                    }
                })
                .catch(err => {
                    console.error('遇见数据请求失败：', err);
                    if (isReset) {
                        container.innerHTML = `<li class="pic1">数据加载失败，请重试</li>`;
                    } else {
                        document.querySelector('.load-more[data-panel="discover"]').textContent = '加载失败，点击重试';
                    }
                })
                .finally(() => {
                    state.isLoading = false;
                });
        }

        // 3. 攻略数据加载函数
        function loadStrategyData(container, type, isReset = false) { 
            const state = panelState.strategy;
            
           
            if (state.isLoading || (!isReset && !state.hasMore)) return;
            
            state.isLoading = true;
            const currentPage = isReset ? 1 : state.page;
            
            const url = type === 'recommend'
                ? `https://bbs.youxiake.com/api/mdd/gonglue?mddId=1057&orderType=0&page=${currentPage}&type=0`
                : `https://bbs.youxiake.com/api/mdd/gonglue?mddId=1057&orderType=1&page=${currentPage}&type=0`;
                
           
            if (!isReset) {
                document.querySelector('.load-more[data-panel="strategy"]').textContent = '加载中...';
            }
                
            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    
                    if (isReset) {
                        container.innerHTML = '';
                    }
                    
                    
                    if (res1.data.list.length === 0) {
                        if (isReset) {
                            container.innerHTML = `<li class="miss1">暂无${type === 'recommend' ? '推荐' : '最新'}攻略内容</li>`;
                        } else {
                            state.hasMore = false;
                            document.querySelector('.load-more[data-panel="strategy"]').textContent = '没有更多数据';
                            document.querySelector('.load-more[data-panel="strategy"]').classList.add('disabled');
                        }
                        return;
                    }
                    
                   
                    res1.data.list.forEach(item => {
                        container.innerHTML += `
                            <li class="miss1">
                                <img class="pe6" src="${item.thumb || ''}" alt="攻略图片">
                                <div class="shadow">
                                    <span class="icon"></span>
                                    <div class="pr2">
                                        <p class="pr1">${item.views || '0'}人已浏览</p>
                                        <p class="pr1">${item.lineNumInNewsContent || '0'}条线路</p>
                                    </div>
                                    <p class="pr3">${item.title || '未命名攻略'}</p>
                                </div>
                            </li>
                        `;
                    });
                    
                  
                    state.page = currentPage + 1;
                    state.hasMore = res1.data.list.length >= 10;
                    
                   
                    const loadMoreBtn = document.querySelector('.load-more[data-panel="strategy"]');
                    loadMoreBtn.textContent = state.hasMore ? '加载更多' : '';
                    if (!state.hasMore) {
                        loadMoreBtn.classList.add('disabled');
                    }
                })
                .catch(err => {
                    console.error('攻略数据请求失败：', err);
                    if (isReset) {
                        container.innerHTML = '<li class="miss1">数据加载失败，请重试</li>';
                    } else {
                        document.querySelector('.load-more[data-panel="strategy"]').textContent = '加载失败，点击重试';
                    }
                })
                .finally(() => {
                    state.isLoading = false;
                });
        }

        // 4. 游记数据加载函数
        function loadTravelData(container, type, isReset = false) {
            const state = panelState.travel;
            
           
            if (state.isLoading || (!isReset && !state.hasMore)) return;
            
            state.isLoading = true;
            const currentPage = isReset ? 1 : state.page;
            
            const url = type === 'recommend'
                ? `https://bbs.youxiake.com/api/mdd/travelnote?mddId=1057&orderType=0&departureDate=&tripDays=&price=&tripType=&travelType=&page=${currentPage}`
                : `https://bbs.youxiake.com/api/mdd/travelnote?mddId=1057&orderType=1&departureDate=&tripDays=&price=&tripType=&travelType=&page=${currentPage}`;
                
           
            if (!isReset) {
                document.querySelector('.load-more[data-panel="travel"]').textContent = '加载中...';
            }
                
            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                   
                    if (isReset) {
                        container.innerHTML = '';
                    }
                    
                   
                    if (res1.data.list.length === 0) {
                        if (isReset) {
                            container.innerHTML = `<li class="trip1">暂无${type === 'recommend' ? '推荐' : '最新'}游记内容</li>`;
                        } else {
                            state.hasMore = false;
                            document.querySelector('.load-more[data-panel="travel"]').textContent = '';
                            document.querySelector('.load-more[data-panel="travel"]').classList.add('disabled');
                        }
                        return;
                    }
                    
                  
                    res1.data.list.forEach(item => {
                        container.innerHTML += `
                            <li class="trip1">
                                <img src="${item.thumb || ''}" alt="游记图片" class="pe7">
                                <img class="pr7" src="./img/z_youji.png" alt="游记标签">
                                <p class="w9">${item.createTime || '未知时间'}</p>
                                <div class="w5">
                                    <p class="w4">${item.title || '未命名游记'}</p>
                                    <div class="w6">
                                        <div class="w7">
                                            <img class="pr4" src="${item.pic || ''}" alt="作者头像">
                                            <span>${item.authorName || '匿名作者'}</span>
                                            <span class="pr5">${item.mdd || '未知地点'}</span>
                                        </div>
                                        <div class="w8">
                                            <img src="./img/z_liulan.png" alt="浏览图标" class="pr6">
                                            <span>${item.views || '0'}</span>
                                            <img src="./img/z_pinglun.png" alt="评论图标" class="pr6">
                                            <span>${item.replies || '0'}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        `;
                    });
                    
                
                    state.page = currentPage + 1;
                    state.hasMore = res1.data.list.length >= 10;
                    
                    
                    const loadMoreBtn = document.querySelector('.load-more[data-panel="travel"]');
                    loadMoreBtn.textContent = state.hasMore ? '加载更多' : '没有更多数据';
                    if (!state.hasMore) {
                        loadMoreBtn.classList.add('disabled');
                    }
                })
                .catch(err => {
                    console.error('游记数据请求失败：', err);
                    if (isReset) {
                        container.innerHTML = `<li class="trip1">数据加载失败，请重试</li>`;
                    } else {
                        document.querySelector('.load-more[data-panel="travel"]').textContent = '加载失败，点击重试';
                    }
                })
                .finally(() => {
                    state.isLoading = false;
                });
        }

        
        document.querySelectorAll('.load-more').forEach(btn => {
            btn.addEventListener('click', function() {
                const panel = this.getAttribute('data-panel');
                const currentPanel = document.querySelector(`.tabPane${['', 'booking', 'discover', 'strategy', 'travel'].indexOf(panel)}`);
                const activeSubTab = currentPanel.querySelector('.second.select1');
                const tabType = activeSubTab.getAttribute('data-type');
                const listContainer = currentPanel.querySelector('ul');
                
                if (panel === 'discover') {
                    loadDiscoverData(listContainer, tabType);
                } else if (panel === 'strategy') {
                    loadStrategyData(listContainer, tabType);
                } else if (panel === 'travel') {
                    loadTravelData(listContainer, tabType);
                }
            });
        });

       
        window.addEventListener('scroll', () => {
           
            const visiblePanel = document.querySelector('.tabContent > div:not(.hide)');
            if (!visiblePanel || visiblePanel.classList.contains('tabPane1')) return;
            
            const panelName = visiblePanel.classList[0].replace('tabPane', '');
            const panelKey = ['', 'booking', 'discover', 'strategy', 'travel'][panelName];
            
            
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 300) {
                const activeSubTab = visiblePanel.querySelector('.second.select1');
                const tabType = activeSubTab.getAttribute('data-type');
                const listContainer = visiblePanel.querySelector('ul');
                
                if (panelKey === 'discover') {
                    loadDiscoverData(listContainer, tabType);
                } else if (panelKey === 'strategy') {
                    loadStrategyData(listContainer, tabType);
                } else if (panelKey === 'travel') {
                    loadTravelData(listContainer, tabType);
                }
            }
        });
        
        window.addEventListener('DOMContentLoaded', () => {
            document.querySelector('.second.select1').click();
        });

        
        function back() {
            window.location.href = 'Lindex.html';
        }
    </script>
</html>